import { Divider } from 'antd'

import PC from '@/components/reposive/pc'
import Mobile from '@/components/reposive/mobile'

import Logo from '@/components/logo/index'
import LeftLinks from '@/components/footer/footer-links'
import MiddleLinks from '@/components/footer/middle-links'
import RightLinks from '@/components/footer/right-links'

import '@/styles/app-footer.css'

const Footer = () => {
  return (
    <>
      <PC>
        <div className="footer-pc">
          <div className="main-content-pc">
            <div className="left-pc">
              <Logo />
              <p>
                Dribbble is the world’s leading community for creatives to
                share, grow, and get hired.
              </p>
              <div className="links-left-pc">
                <LeftLinks />
              </div>
            </div>
            <div className="middle-pc">
              <MiddleLinks />
            </div>
            <div className="right-pc">
              <RightLinks />
            </div>
          </div>
          <Divider />
          <div className="lower-content-pc">
            <div>© 2020 Dribbble. All rights reserved.</div>
            {/* Worcester, MADenverMontreal,
              QuebecOrlando, FLRoseville, MNMinneapolis, MNLos Angeles,
              CACanadaOttawa, OntarioMontrealNorth Vancouver, BCGrass Valley,
              CaliforniaVictoria, BCAustin, TXCavite, PhilippinesOttawa,
              ONManila, PhilippinesAlamo, CAVancouver, BCMontreal,
              CanadaToronto, ONSan Diego, */}
            <div>Made with ♥ remotely from</div>
            <div>14,495,254 shots dribbbled</div>
          </div>
        </div>
      </PC>
      <Mobile>footer mobile</Mobile>
    </>
  )
}

export default Footer
